<template>
    <div :class="['btns', { isPosition: type == 0 }]">
        <span v-show="item.count > 0" @click="increment(item)">-</span>
        <p v-show="item.count > 0">{{ item.count }}</p>
        <span @click="add(item)">+</span>
    </div>
</template>
  
<script>
export default {
    // 接收父组件传递过来的item对象数据，和type字段
    props: ["item", "type"],
    methods: {
        add(food) {
            //点击按钮判断，该对象有没有count字段，没有的话，添加count字段，取值为1！
            if (!food.count) {
                food.count = 1;
            } else {
                food.count++;
            }
            // 操作mutation 把该food对象push到store中carList数组中
            this.$store.commit("setCarList", {
                item: food,
            });
        },
        increment(food) {
            food.count--;
            if (food.count === 0) {
                this.$store.commit('delList', { item: food })
            }
        },
    },
};
</script>

<style scoped>
.btns {
    display: flex;
}

.btns span {
    display: block;
    width: 22px;
    height: 22px;
    line-height: 20px;
    border-radius: 50%;
    font-size: 24px;
    text-align: center;
    font-weight: bold;
    color: rgb(0, 160, 220);
    border: 2px rgb(0, 160, 220) solid;
    margin: 0vw 1.333vw;
}

.isPosition {
    position: absolute;
    right: 10px;
    bottom: 10px;
}
</style>